<template>
	<!-- 我的线上培训 -->
	<view class="my-xspx">
		<!-- tab切换 -->
		<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor"
			@clickItem="onClickItem" />
		<view class="content">
			<!-- 加载中效果 -->
			<uni-load-more v-if="loading" status="loading" />
			<!-- 培训列表 -->
			<view class="training-list" v-if="!loading && trainingList.length > 0">
				<view class="training-item" v-for="(item, index) in trainingList" :key="index"
					@click="viewDetail(item)">
					<view class="item-row">
						<view class="item-left">
							<image
								:src="item.image || 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png'"
								mode="aspectFill"></image>
						</view>
						<view class="item-right">
							<view class="company">{{item.company}}</view>
							<view class="content">{{item.content}}</view>
							<view class="time">{{item.time}}</view>
						</view>
					</view>
					<!-- 编辑、删除 -->
					<view class="row-edit-del">
						<view v-if="item.status !== '审核通过'" class="block-btn" @click.stop="handleEdit(item)">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_bj.png"
								mode="widthFix"></image> 编辑
						</view>
						<view class="block-btn" @click.stop="handleDelete(item)">
							<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_sc.png"
								mode="widthFix"></image> 删除
						</view>
					</view>
				</view>
			</view>
			<!-- 暂无数据显示 -->
			<view class="zwxx-img" v-if="!loading && trainingList.length === 0">
				<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png" mode="widthFix"></image>
				<view>暂无数据</view>
			</view>
		</view>
		<view class="public-btn-w xzxspx-btn">
			<button class="public-btn" @click="toggleXspx()">新增线上培训</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['待审核', '审核通过', '审核不通过'],
				current: 0,
				styleType: 'text',
				activeColor: '#AC6C17',
				loading: false,
				trainingList: []
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			async init() {
				this.loading = true;
				try {
					const res = await this.$api.getTrainList({
						pageNum: 1,
						pageSize: 1000,
						params: {
							createUserId: this.userInfo.guid,
							status: this.items[this.current]
						}

					});
					if (res.succ) {
						this.trainingList = res.data.list;
					}
				} catch (error) {
					console.error('获取数据失败:', error);
					uni.showToast({
						title: '数据加载失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			onClickItem(index) {
				const currentIndex = Number(index.currentIndex);
				if (this.current !== currentIndex) {
					this.current = currentIndex;
					this.init();
				}
			},
			toggleXspx() {
				if (this.userInfo.userType === '普通用户') {
					uni.showToast({
						title: '开通会员才能使用此功能',
						icon: 'none'
					});
					return;
				}
				if (this.userInfo.srStatus !== '1') {
					uni.showToast({
						title: '认证完成后才能使用此功能',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/xspx/xspx'
				});
			},
			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/xspx/xspx?id=${item.guid}&type=view`
				});
			},
			handleEdit(item) {
				uni.navigateTo({
					url: `/pages/xspx/xspx?id=${item.guid}&type=edit`
				});
			},
			handleDelete(item) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这条培训信息吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								const result = await this.$api.getTrainDelete([item.guid]);
								if (result.succ) {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									});
									this.init();
								}
							} catch (error) {
								console.error('删除失败:', error);
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							}
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.my-xspx {
		height: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #FAEBDB 0%, rgba(255, 247, 238, 0) 500rpx);

		.segmented-control {
			position: relative;
			height: 100rpx !important;

			&::after {
				z-index: -1;
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 1rpx;
			}

			.segmented-control__text {
				padding: 15px 10rpx !important;
				font-size: 32rpx !important;
			}

			.segmented-control__item--text {
				position: relative;

				&::after {
					z-index: 2;
					content: '';
					position: absolute;
					left: 10rpx;
					right: 10rpx;
					bottom: -1px;
					height: 4rpx;
					background: #AC6C17;
				}
			}
		}

		.content {
			flex: 1;
			overflow: auto;
			padding: 20rpx 30rpx;

			.training-list {
				.training-item {
					display: flex;
					flex-direction: column;
					padding: 30rpx 30rpx 10rpx;
					background-color: #FFF7EE;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					.item-row {
						display: flex;
					}

					.item-left {
						width: 200rpx;
						height: 200rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.item-right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.company {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
							padding: 12rpx 0;
							margin-bottom: 10rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}

						.content {
							font-size: 30rpx;
							color: #333;
							padding: 5rpx 0 0;
							margin-bottom: 10rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.time {
							text-align: right;
							font-size: 24rpx;
							color: #999;
							margin-bottom: 10rpx;
						}

						.actions {
							display: flex;
							justify-content: flex-end;
							gap: 20rpx;

							button {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 0 30rpx;
								height: 60rpx;
								line-height: 60rpx;
								font-size: 28rpx;
								border-radius: 30rpx;
								background: #fff;
								border: 1rpx solid #AC6C17;
								color: #AC6C17;

								&.edit-btn {
									background: #AC6C17;
									color: #fff;
									border: none;

									&::before {
										content: '';
										display: inline-block;
										width: 24rpx;
										height: 24rpx;
										background: url('https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_bj.png') no-repeat center;
										background-size: contain;
										margin-right: 10rpx;
									}
								}

								&.delete-btn {
									background: #fff;
									color: #AC6C17;
									border: 1rpx solid #AC6C17;

									&::before {
										content: '';
										display: inline-block;
										width: 24rpx;
										height: 24rpx;
										background: url('https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/wdfb_sc.png') no-repeat center;
										background-size: contain;
										margin-right: 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}


		.xzxspx-btn {
			margin: 0 30rpx;
		}
	}
</style>